下拉菜单 Dropdown |
您所在的位置：网站首页 › antdesign table 自定义右键菜单 › 下拉菜单 Dropdown |
下拉菜单 Dropdown
|
何时使用 当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。 用于收罗一组命令操作。Select 用于选择，而 Dropdown 是命令集合。代码演示Hover me基本最简单的下拉菜单。 External Link Icon  箭头可以展示一个箭头。 External Link Icon箭头指向设置 arrow 为 { pointAtCenter: true } 后，箭头将指向目标元素的中心。 External Link IconHover me, Click menu item触发事件点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作。 External Link IconHover me扩展菜单使用 dropdownRender 对下拉菜单进行自由扩展。如果你并不需要 Menu 内容，请直接使用 Popover 组件。 External Link IconHover me菜单隐藏方式默认是点击关闭菜单，可以关闭此功能。 External Link Icon加载中状态添加 loading 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。 External Link Icon弹出位置支持 6 个弹出位置。 External Link IconHover me其他元素分割线和不可用菜单项。 External Link IconClick me触发方式默认是移入触发菜单，可以点击触发。 External Link Icon带下拉框的按钮左边是按钮，右边是额外的相关功能菜单。可设置 icon 属性来修改右边的图标。 External Link IconCascading menu多级菜单传入的菜单里有多个层级。 External Link IconRight Click on here右键菜单默认是移入触发菜单，可以点击鼠标右键触发。弹出菜单位置会跟随右键点击位置变动。 External Link IconSelectable菜单可选选择添加 menu 中的 selectable 属性可以开启选择能力。 External Link IconAPI通用属性参考：通用属性 Dropdown参数说明类型默认值版本arrow下拉框箭头是否显示boolean | { pointAtCenter: boolean }falseautoAdjustOverflow下拉框被遮挡时自动调整位置booleantrue5.2.0autoFocus打开后自动聚焦下拉框booleanfalse4.21.0disabled菜单是否禁用boolean-destroyPopupOnHide关闭后是否销毁 DropdownbooleanfalsedropdownRender自定义下拉框内容(menus: ReactNode) => ReactNode-4.24.0getPopupContainer菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。示例(triggerNode: HTMLElement) => HTMLElement() => document.bodymenu菜单配置项MenuProps-4.24.0overlayClassName下拉根元素的类名称string-overlayStyle下拉根元素的样式CSSProperties-placement菜单弹出位置：bottom bottomLeft bottomRight top topLeft topRightstringbottomLefttrigger触发下拉的行为，移动端不支持 hoverArray[hover]open菜单是否显示，小于 4.23.0 使用 visible（为什么?）boolean-4.23.0onOpenChange菜单显示状态改变时调用，点击菜单按钮导致的消失不会触发。小于 4.23.0 使用 onVisibleChange（为什么?）(open: boolean, info: { source: 'trigger' | 'menu' }) => void-info.source: 5.11.0Dropdown.Button属性与 Dropdown 的相同。还包含以下属性： 参数说明类型默认值版本buttonsRender自定义左右两个按钮(buttons: ReactNode[]) => ReactNode[]-loading设置按钮载入状态boolean | { delay: number }falsedanger设置危险按钮boolean-4.23.0icon右侧的 iconReactNode-size按钮大小，和 Button 一致stringdefaulttype按钮类型，和 Button 一致stringdefaultonClick点击左侧按钮的回调，和 Button 一致(event) => void-注意请确保 Dropdown 的子元素能接受 onMouseEnter、onMouseLeave、onFocus、onClick 事件。 主题变量（Design Token）组件 Token如何定制？Token 名称描述类型默认值paddingBlock下拉菜单纵向内边距undefined | PaddingBlock5zIndexPopup下拉菜单 z-indexnumber1050全局 Token如何定制？FAQDropdown 在水平方向超出屏幕时会被挤压该怎么办？你可以通过 width: max-content 来解决这个问题，参考 #43025。 |
【本文地址】
今日新闻 |
推荐新闻 |